<template>
    <view class="box">
      <view class="coll" v-for="(item,index) in coll" :key="index">
        <view class="coll-left">
          <image :src="item.img" alt=""></image>
        </view>
        <view class="coll-right">
          <view class="coll-right1"><span>{{item.text}}</span>{{item.text1}}</view>
          <view class="coll-right2">￥{{item.text2}}</view>
          <view class="coll-right3">
            <view class="coll-right3-1">￥{{item.text3}}</view>
            <view class="coll-right3-2">{{item.text4}}</view>
          </view>
          <view class="coll-right4">
            <view class="coll-right4-1">
              {{item.text5}}
              <view class="coll-right4-1-1">￥{{item.text6}}</view>
            </view>
            <view class="coll-right4-2">{{item.text7}}</view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
    export default {
      data() {
        return {
          coll: [{
              img: '/static/image7.png',
              text1: '小米手环6 全面彩屏 30种运动模式24h心率检测智能运动手...',
              text2: '120.00',
              text3: '180.00',
              text4: '月销180',
              text5: '送红包',
              text6: '50',
              text7: '邀请新人抢购在优惠5%'
            },
            {
              img: '/static/store5.png',
              text: '自营',
              text1: '小米手环6 全面彩屏 30种运动模式24h心率检测智能运动手...',
              text2: '120.00',
              text3: '180.00',
              text4: '月销180',
              text5: '送红包',
              text6: '50',
              text7: '邀请新人抢购在优惠5%'
            },
            {
              img: '/static/image7.png',
              text1: '小米手环6 全面彩屏 30种运动模式24h心率检测智能运动手...',
              text2: '120.00',
              text3: '180.00',
              text4: '月销180',
              text5: '送红包',
              text6: '50',
              text7: '邀请新人抢购在优惠5%'
            },
            {
              img: '/static/store5.png',
              text: '自营',
              text1: '小米手环6 全面彩屏 30种运动模式24h心率检测智能运动手...',
              text2: '120.00',
              text3: '180.00',
              text4: '月销180',
              text5: '送红包',
              text6: '50',
              text7: '邀请新人抢购在优惠5%'
            }
          ]
        }
      },
      methods: {
  
      }
    }
  </script>
  
  <style lang="scss">
    .box {
      width: 100%;
      margin: auto;
      background-color: #f5f5f5;
    }
  
    .coll {
      width: 90%;
      margin: auto;
      background-color: #ffffff;
      margin-bottom: 30rpx;
      display: flex;
      border-radius: 10rpx;
  
      .coll-left {
        width: 50%;
        height: 260rpx;
        margin: 20rpx;
  
        image {
          width: 100%;
          height: 260rpx;
          border-radius: 20rpx;
        }
      }
  
      .coll-right {
        width: 80%;
        margin: auto;
  
        .coll-right1 {
          font-size: 33rpx;
          margin-top: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
  
          span {
            background-color: #fc4424;
            border-radius: 10rpx;
            color: #fff;
            font-size: 28rpx;
          }
        }
  
        .coll-right2 {
          margin-top: 10rpx;
          color: #fc3816;
          font-size: 35rpx;
        }
  
        .coll-right3 {
          width: 90%;
          display: flex;
          margin-top: 10rpx;
          justify-content: space-between;
  
          .coll-right3-1 {
            text-decoration: line-through;
            color: #a0a0a0;
            font-size: 28rpx;
          }
  
          .coll-right3-2 {
            color: #a0a0a0;
            font-size: 28rpx;
          }
        }
        .coll-right4{
          display: flex;
          .coll-right4-1{
            width: 33%;
            height: 50rpx;
            line-height: 50rpx;
            display: flex;
            margin: 10rpx;
            font-size: 21rpx;
            border: 1px solid #fc4424;
            border-radius: 10rpx;
            color: #d95844;
            .coll-right4-1-1{
              width: 51%;
              text-align: center;
              border-radius: 10rpx;
              background-color: #fc4424;
              color:#fff;
            }
          }
          .coll-right4-2{
            width: 60%;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 21rpx;
            border: 1px solid red;
            margin-top: 10rpx;
            color: #d95844;
             border-radius: 10rpx;
             text-align: center;
          }
        }
      }
    }
  </style>
  